<template>
  <div id="layout">
    <el-container>
      <el-header style="background-color: #343f51">
        <div
          style="height: 100%;display: flex;justify-content: flex-start;color: #fff;"
        >
          <div style="display: flex;align-items: center;flex: 1 0 auto">
            <!--中网-->
            <!--<img-->
            <!--  style="width: 36px;margin-right: 15px"-->
            <!--  src="@/assets/logo.png"-->
            <!--&gt;-->
            <!--上容-->
            <!--<img-->
            <!--  style="height: 40px;margin-right: 15px"-->
            <!--  src="@/assets/logo/logo-shangrong.png"-->
            <!--&gt;-->
            <!--中网-->
            <!--<img-->
            <!--  style="height: 40px;margin-right: 15px"-->
            <!--  src="@/assets/logo/logo-zhongwang.png"-->
            <!--&gt;-->
            <span class="header-main-font-size">
              {{ $t("message.layout.header")
              }}{{ $t("message.layout.littleHeader") }}
            </span>
            <span
              style="margin-left: 20px"
              v-if="$store.state.uid"
            >
              ({{ $store.state.networkContorlCenterName }})
            </span>
          </div>
          <div style="margin-right: 40px">
            <el-menu
              class="my-menu-style"
              :router="true"
              :default-active="$route.path"
              mode="horizontal"
              text-color="#5e88c2"
              active-text-color="#fff"
              background-color="#343f51"
            >
              <el-menu-item
                style="padding-right: 45px"
                index="/home"
              >
                <img
                  v-if="$route.path === '/home'"
                  class="menu-item-img"
                  src="@/assets/layout/zy1.png"
                >
                <img
                  v-else
                  class="menu-item-img"
                  src="@/assets/layout/zy.png"
                >
                {{ $t("message.layout.menu.0.title") }}
              </el-menu-item>
              <el-submenu index="2">
                <template slot="title">
                  <img
                    v-if="$route.path.split('/')[1] === 'config'"
                    class="menu-item-img"
                    src="@/assets/layout/pz1.png"
                  >
                  <img
                    v-else
                    class="menu-item-img"
                    src="@/assets/layout/pz.png"
                  >
                  {{ $t("message.layout.menu.1.title") }}
                </template>
                <el-menu-item index="/config/antenna">
                  {{ $t("message.layout.menu.1.submenu.8") }}
                </el-menu-item>
                <el-menu-item index="/config/resource">
                  {{ $t("message.layout.menu.1.submenu.2") }}
                </el-menu-item>
                <el-menu-item index="/config/remote">
                  {{ $t("message.layout.menu.1.submenu.0") }}
                </el-menu-item>
                <el-menu-item index="/config/center/antenna">
                  {{ $t("message.layout.menu.1.submenu.1") }}
                </el-menu-item>
                <!-- <el-menu-item index="/config/subscribe">
                  {{ $t('message.layout.menu.1.submenu.3') }}
                </el-menu-item> -->
                <el-menu-item index="/config/p2p">
                  {{ $t("message.layout.menu.1.submenu.6") }}
                </el-menu-item>
                <!--<el-menu-item index="/config/multicast">-->
                <!--  {{ $t('message.layout.menu.1.submenu.4') }}-->
                <!--</el-menu-item>-->
                <el-menu-item index="/config/virtualSubnet">
                  {{ $t("message.layout.menu.1.submenu.5") }}
                </el-menu-item>
                <!--接入预案-->
                <el-menu-item index="/config/accessPlan">
                  {{ $t('message.layout.menu.1.submenu.7') }}
                </el-menu-item>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <img
                    v-if="$route.path.split('/')[1] === 'data'"
                    class="menu-item-img"
                    src="@/assets/layout/sj1.png"
                  >
                  <img
                    v-else
                    class="menu-item-img"
                    src="@/assets/layout/sj.png"
                  >
                  {{ $t("message.layout.menu.2.title") }}
                </template>
                <el-menu-item index="/data/runningLog">
                  {{ $t("message.layout.menu.2.submenu.0") }}
                </el-menu-item>
                <el-menu-item index="/data/communicationLog">
                  {{ $t("message.layout.menu.2.submenu.1") }}
                </el-menu-item>
                <el-menu-item index="/data/callLog">
                  {{ $t("message.layout.menu.2.submenu.2") }}
                </el-menu-item>
                <el-menu-item index="/data/snrLog">
                  {{ $t("message.layout.menu.2.submenu.3") }}
                </el-menu-item>
                <el-menu-item index="/data/operationLog">
                  {{ $t("message.layout.menu.2.submenu.4") }}
                </el-menu-item>
                <el-menu-item index="/data/performanceLog">
                  {{ $t("message.layout.menu.2.submenu.5") }}
                </el-menu-item>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title">
                  <img
                    v-if="$route.path.split('/')[1] === 'system'"
                    class="menu-item-img"
                    src="@/assets/layout/xt1.png"
                  >
                  <img
                    v-else
                    class="menu-item-img"
                    src="@/assets/layout/xt.png"
                  >
                  {{ $t("message.layout.menu.3.title") }}
                </template>
                <el-menu-item index="/system/networkParameters">
                  {{ $t("message.layout.menu.3.submenu.0") }}
                </el-menu-item>
                <!--分级管理-->
                <!--<el-menu-item index="/system/ltlManage">-->
                <!--  {{ $t('message.layout.menu.3.submenu.1') }}-->
                <!--</el-menu-item>-->
                <!--数据库导出-->
                <el-menu-item
                  index=""
                  @click.native="handleDatabaseDump"
                >
                  {{ $t("message.layout.menu.3.submenu.3") }}
                </el-menu-item>
                <!--用户管理-->
                <el-menu-item
                  v-if="$store.state.is_staff"
                  index="/system/userManage"
                >
                  {{ $t("message.layout.menu.3.submenu.2") }}
                </el-menu-item>
                <!--终端更新包管理-->
                <!-- <el-menu-item index="/system/cpm">
                  {{ $t("message.layout.menu.3.submenu.4") }}
                </el-menu-item> -->
                <!--网络设备拓扑图-->
                <!--<el-menu-item index="/system/devicetopology">-->
                <!--  {{ $t("message.layout.menu.3.submenu.5") }}-->
                <!--</el-menu-item>-->
              </el-submenu>
            </el-menu>
          </div>
          <div
            class="text-font-size"
            style="display: flex;align-items: center"
          >
            <font-awesome-icon
              style="color: #5e88c2"
              :icon="['far', 'user-circle']"
              size="lg"
            />
            <span style="margin-left: 10px;color: #5e88c2">{{
              $store.state.username
            }}</span>
            <el-dropdown>
              <span style="margin: 0 10px;color:#5e88c2;cursor: pointer">
                <i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleUserLogout">
                  <!--注销-->
                  {{ $t("message.layout.logout") }}
                </el-dropdown-item>
                <el-dropdown-item @click.native="passwordFormVisible = true">
                  <!--修改密码-->
                  {{ $t("message.layout.modifyPass") }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <!--语言-->
            <el-dropdown>
              <span style="margin: 0 20px;color:#5e88c2;cursor: pointer">
                {{ $t("message.languageName") }}
                <i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleLocaleChange('zh-CN')">
                  中文
                </el-dropdown-item>
                <el-dropdown-item @click.native="handleLocaleChange('en-US')">
                  English
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container style="height: calc(100% - 60px)">
        <el-main
          class="background-color-base"
          style="position: relative;"
        >
          <router-view />
        </el-main>
        <el-footer
          style="border-top: solid 1px #c0c4cc"
          class="background-color-white"
        >
          <div
            style="height: 100%;padding: 10px 20px;padding-right: 0;box-sizing: border-box;display: flex;flex-flow: row nowrap;align-items: center"
          >
            <div
              class="card-header-div"
              style="flex: 0 0 3em;"
            >
              {{ $t("message.layout.events") }}
            </div>
            <div
              @click="eventListDialogVisible = true"
              class="background-color-info text-font-size"
              style="cursor: pointer"
            >
              {{ eventBar }}
            </div>
          </div>
        </el-footer>
      </el-container>
    </el-container>

    <div>
      <el-dialog
        :title="$t('message.layout.eventDialog.title')"
        width="60%"
        :visible.sync="eventListDialogVisible"
      >
        <el-table
          :data="eventList"
          height="500px"
          header-cell-class-name="my-table-header-cell"
          cell-class-name="my-table-cell"
        >
          <el-table-column
            type="index"
            :index="indexMethod"
          />
          <el-table-column
            :label="$t('message.layout.eventDialog.col1')"
            prop="dateTime"
            width="200px"
          />
          <el-table-column
            :label="$t('message.layout.eventDialog.col2')"
            prop="msg_type"
            width="120px"
          />
          <el-table-column
            :label="$t('message.layout.eventDialog.col3')"
            prop="msg_type_name"
            width="180px"
          />
          <el-table-column :label="$t('message.layout.eventDialog.col4')">
            <template slot-scope="scope">
              <div v-html="scope.row.event_content" />
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="$store.getters.getHomeCuLogList.length"
          />
        </div>
      </el-dialog>

      <!--修改密码-->
      <el-dialog
        :title="$t('message.layout.passwordDialog.title')"
        width="15%"
        :visible.sync="passwordFormVisible"
      >
        <el-form
          ref="passwordForm"
          :model="passwordForm"
          :rules="passwordFormRules"
          label-width="80px"
        >
          <!--原密码-->
          <el-form-item
            :label="$t('message.layout.passwordDialog.form.label1')"
            prop="password"
          >
            <el-input
              type="password"
              v-model="passwordForm.password"
            />
          </el-form-item>
          <!--新密码-->
          <el-form-item
            :label="$t('message.layout.passwordDialog.form.label2')"
            prop="passwordNew"
          >
            <el-input
              type="password"
              v-model="passwordForm.passwordNew"
            />
          </el-form-item>
          <!--密码确认-->
          <el-form-item
            :label="$t('message.layout.passwordDialog.form.label3')"
            prop="passwordNewConfirm"
          >
            <el-input
              type="password"
              v-model="passwordForm.passwordNewConfirm"
            />
          </el-form-item>
          <el-form-item class="button-form-item">
            <el-button
              :loading="submitButtonLoading"
              @click="changePasswordSubmit()"
              type="primary"
            >
              <!--确定-->
              {{ $t("message.layout.passwordDialog.form.label3") }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import service from '@/service/service'
export default {
  name: 'Layout',
  computed: {
    eventBar () {
      return this.eventList.length !== 0
        ? `${[
          this.eventList[0].dateTime
        ]}\xa0\xa0\xa0\xa0${this.eventList[0].event_content
          .split('<br />')
          .join('')}`
        : ''
    },
    eventList () {
      let res = this.$store.getters.getHomeCuLogList.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      )
      return service.getEventContent(res)
    }
  },
  data () {
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        // 请再次输入密码
        callback(new Error(this.$t('message.layout.validate.pass.err1')))
      } else if (value !== this.passwordForm.passwordNew) {
        // 两次输入密码不一致!
        callback(new Error(this.$t('message.layout.validate.pass.err2')))
      } else {
        callback()
      }
    }
    return {
      cus: null,
      userform: {
        username: null,
        password: null
      },

      eventListDialogVisible: false,
      pageSize: 10,
      currentPage: 1,

      submitButtonLoading: false,
      passwordFormVisible: false,
      passwordForm: {
        password: '',
        passwordNew: '',
        passwordNewConfirm: ''
      },
      passwordFormRules: {
        password: [
          // 请输入原密码
          {
            required: true,
            message: this.$t('message.layout.validate.pass.err3'),
            trigger: 'blur'
          }
        ],
        passwordNew: [
          // 请输入新密码
          {
            required: true,
            message: this.$t('message.layout.validate.pass.err4'),
            trigger: 'blur'
          }
        ],
        passwordNewConfirm: [{ validator: validatePass2, trigger: 'blur' }]
      }
    }
  },
  mounted () {
    let self = this
    self.$nextTick(async () => {
      await self.$store.dispatch(`getHomeCuLogList`)
    })
  },
  methods: {
    indexMethod (index) {
      return index + (this.currentPage - 1) * this.pageSize + 1
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
    },
    async handleUserLogout () {
      let self = this
      // 确定注销?
      await self.$confirm(
        self.$t('message.layout.message.msg1'),
        self.$t('message.common.label.prompt'),
        {
          confirmButtonText: self.$t('message.common.button.confirm'),
          cancelButtonText: self.$t('message.common.button.cancel'),
          type: 'warning'
        }
      )
      await self.$store.dispatch('axios', {
        method: 'post',
        url: '/api/abs/auth/logout/'
      })
      localStorage.removeItem('token')
      self.$router.push('/login')
    },
    async changePasswordSubmit () {
      let self = this
      try {
        await self.$refs.passwordForm.validate()
      } catch (e) {
        return
      }
      try {
        self.submitButtonLoading = true
        await self.$store.dispatch('axios', {
          method: 'post',
          url: `/api/abs/auth/users/${self.$store.state.userId}/password/`,
          data: {
            old_password: self.passwordForm.password,
            new_password: self.passwordForm.passwordNew
          },
          proxy: false
        })
      } finally {
        self.submitButtonLoading = false
      }
      // 密码修改成功,请重新登录!
      self.$message.success(self.$t('message.layout.message.msg2'))
      self.$router.push('/login')
    },
    handleLocaleChange (locale) {
      localStorage.setItem('locale', locale)
      // self.$store.commit('setLocale', locale)
      // self.$i18n.locale = locale
      // 设置缓存后刷新页面
      window.location.reload()
    },
    // 数据库导出
    async handleDatabaseDump () {
      let self = this
      try {
        // 确定要进行数据导出吗？
        await self.$confirm(
          self.$t('message.layout.info.prompt.prompt1'),
          self.$t('message.common.label.prompt'),
          {
            confirmButtonText: self.$t('message.common.button.confirm'),
            cancelButtonText: self.$t('message.common.button.cancel'),
            type: 'warning'
          }
        )
      } catch (e) {
        return
      }
      window.open('/api/abs/mtw/database/dump/')
    }
  }
}
</script>

<style lang="scss">
#layout {
  height: 100%;
}
.menu-item-img {
  margin-right: 10px;
  width: 20px;
}
// 选中的菜单的背景色
.my-menu-style {
  .is-active {
    background-color: rgb(42, 50, 65) !important;
    .el-submenu__title {
      background-color: rgb(42, 50, 65) !important;
    }
  }
}
</style>
